@extends('layouts.app', ['activePage' => 'post', 'titlePage' => '晒图管理'])

@section('content')
  <div class="content">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12">
          <div class="card">
            <div class="card-header card-header-primary">
              <h4 class="card-title ">晒图管理</h4>
            </div>
            <div class="card-body">
              @if (session('status'))
                <div class="row">
                  <div class="col-sm-12">
                    <div class="alert alert-success">
                      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <i class="material-icons">close</i>
                      </button>
                      <span>{{ session('status') }}</span>
                    </div>
                  </div>
                </div>
              @endif
              <div class="row justify-content-between">
                <div class="col-md-auto mr-auto">
                  <ul class="nav">
                    <li class="nav-item">
                      <a class="nav-link {{ is_null(request()->type)?:'active' }}" href="?type">全部({{ $countAll }})</a>
                    </li>
                    <li class="nav-item {{ (request()->type !== 1)?:'active' }}">
                      <a class="nav-link" href="?type=1">正常({{ $countStatus1 }})</a>
                    </li>
                    <li class="nav-item {{ (request()->type !== 0)?:'active' }}">
                      <a class="nav-link" href="?type=0">屏蔽({{ $countStatus0 }})</a>
                    </li>
                  </ul>
                </div>
                <div class="col-auto">
                  <form class="navbar-form navbar-search" method="get">
                    <div class="input-group no-border">
                      <input type="text" name="search" class="form-control" placeholder="查找...">
                      <button type="submit" class="btn btn-white btn-round btn-just-icon">
                        <i class="material-icons">search</i>
                        <div class="ripple-container"></div>
                      </button>
                    </div>
                  </form>
                </div>
              </div>
              <div class="table-responsive">
                <table class="table">
                  <thead class="text-primary">
                  <th class="text-center">#</th>
                  <th class="text-center">图片</th>
                  <th class="text-center">文字内容</th>
                  <th>发布者</th>
                  <th>发布时间</th>
                  <th>评论</th>
                  <th class="text-center">状态</th>
                  <th class="text-right">动作</th>
                  </thead>
                  <tbody>
                  @if(is_null($posts) || count($posts)==0)
                    <tr>
                      <td class="text-center" colspan="10">没有更多数据</td>
                    </tr>
                  @endif
                  @foreach($posts as $post)
                    <tr id="post-{{ $post->id }}">
                      <td class="text-center">
                        {{ $loop->iteration }}
                      </td>
                      <td>
                        @foreach($post->photos as $img)
                        <img src="{{ $img }}" class="mx-auto d-block" width="120px" height="120px">
                        @endforeach
                      </td>
                      <td style="max-width: 300px">
                        {{ $post->content }}
                      </td>
                      <td>
                        <a href="{{ route('user.index', [$post->user_id]) }}">{{ $post->user->username }}</a>
                      </td>
                      <td class="table-col-created-at">
                        {{ $post->created_at->toDateTimeString() }}
                      </td>
                      <td>
                        <a href="{{ route('post.show', [$post->id]) }}">({{ $post->comments_count }})</a>
                      </td>
                      <td class="text-center table-col-status">
                        @switch($post->status)
                          @case(0)
                          <span class="badge badge-default">屏蔽</span>@break
                          @case(1)
                          <span class="badge badge-success">正常</span>@break
                          @default
                          未知状态
                        @endswitch
                      </td>
                      <td class="td-actions text-right">
                        <a rel="tooltip" class="btn btn-success btn-link btn-post-status" href="javascript:"
                           data-post-status={{ $post->status }} data-post-id={{ $post->id }}>
                          {{ ($post->status === 0)?'解除屏蔽':'屏蔽' }}
                          <div class="ripple-container"></div>
                        </a>
                      </td>
                    </tr>
                  @endforeach
                  </tbody>
                </table>
              </div>
            </div>
            <div class="card-footer justify-content-end">
              <div class="col-auto">
                {{ $posts->links() }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection

@push('js')
  <script>
      $('.btn-post-status').on('click', function () {
          let id = $(this).attr('data-post-id');
          let status = $(this).attr('data-post-status');
          axios.patch(`/post/${id}/status`, {
              status: status > 0 ? 0 : 1
          }).then(res => {
              if (res.status === 200)
                  // return res.data;
                  location.reload();
              else
                  reject(new Error(`[${res.status}]${res.statusText}: ${res.data}`));
          });
          // .then(data => {
          //     console.log(data);
          //     let s = null;
          //     switch (data.status) {
          //         case 1:
          //             s = '<span class="badge badge-success">正常</span>';
          //             $(`#post-${id} .btn-post-status`).text('屏蔽');
          //             break;
          //         case 0:
          //             s = '<span class="badge badge-default">屏蔽</span>';
          //             $(`#post-${id} .btn-post-status`).text('解除屏蔽');
          //             break;
          //         default:
          //             console.log('Unknown status result: ' + s);
          //     }
          //     $(`#post-${id} .table-col-status`).html(s);
          //   {{-- $(`#post-${id} .btn-post-edit`).hide(); --}}
          //   $(this).attr('data-post-status', data.status);
          // }).catch(e => console.log(e));
      });
  </script>
@endpush
